<template>
  <div class="box">
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick" v-show="flag==1">
      <el-tab-pane label="告知信息" name="first" class="first_box">
        
      </el-tab-pane>
    </el-tabs> -->
    <div class="first_box">
      <div class="select_bxo">
        <div>权利人姓名</div>
        <el-input v-model="needInfo.name" class="input" @blur="getSupervising" placeholder="请输入权利人姓名"></el-input>
        <el-button type="primary" @click="search(1)">查询</el-button>
        <el-button type="primary" @click="download">导出</el-button>
      </div>

      <div class="basicInfo_content">
        <el-table :data="infoList" border style="width: 100%">
          <el-table-column type="index" show-overflow-tooltip label="序号" width="60"></el-table-column>
          <el-table-column prop="landName" label="片块" width="200"></el-table-column>
          <el-table-column prop="qlr" label="权利人"></el-table-column>
          <el-table-column prop="qsdw" label="权属单位"></el-table-column>
          <el-table-column prop="xdm" label="小地名"></el-table-column>
          <el-table-column prop="nczjd" label="宅基地面积"></el-table-column>
          <el-table-column prop="zjdfs" label="宅基地附属用地面积"></el-table-column>
          <el-table-column prop="qt" label="其他"></el-table-column>
          <el-table-column prop="total" label="合计"></el-table-column>
        </el-table>
        <div class="page_class">
          <el-pagination
          @current-change="showPage1"
          :current-page.sync="needInfo.page"
          :page-size="needInfo.size"
          layout="prev, pager, next, jumper"
          :total="totalPage1"
        ></el-pagination>
        </div>
      </div>
    </div>
    <div class="landInfo" v-show="flag==2">
      <div class="back">
        <el-button icon="el-icon-back" size="small" @click="flag=1">返回</el-button>
      </div>
      <div class="title">
          <p class="title_one">{{rowsInfo.landName}}</p>
          <p class="title_little">
            <span>项目告知时间：{{rowsInfo.time}}</span>
            <span>项目告知位置：{{rowsInfo.place}}</span>
          </p>
      </div>
      <div class="project_position">
        <div class="project_title">
          项目告知位置
        </div>
        <div class="project_img">
          <img src="../../../assets/mapText.png" width="500" height="400">
        </div>
      </div>
      <div class="project_position">
        <div class="project_title">
          项目告知照片
        </div>
        <div class="project_img">
          <el-table :data="imgArr" border style="width: 100%">
       
            <el-table-column type="index" show-overflow-tooltip label="序号" width="60"></el-table-column>
              <el-table-column prop="imgName" label="现场照片"  width="200"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary"  fixed="left" @click="btnSeeImg(scope.row.filePath,scope.row.name)">查看</el-button>
                  </template>
              </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
import { supervising,superviseCheck,notifiInfo } from "@/api/xmgz";

export default {
  components: {
    xTable
  },
  data() {
    return {
      activeName: "first",
      input: "",
      power:'',
      currentPage4: 4,
      needInfo:{
        page:1,
        size:10,
        name:'',
        time:'',
      },
      needInfo1:{
        page:1,
        size:10,
        photo:'',
        time:'',
      },
      infoList:[],
      infoList1:[],
      totalPage1:0,
      totalPage2:0,
      publicTime:'',
      flag:1,
      seeImgDialog:false,
      rowsInfo:'',
      imgArr:[],
      imgPath:'',
      title:'',
      itemData:{
        place:'',
        time:''
      }
    };
  },
  created(){
    this.getSupervising()
  },
  methods: {
    //导出
    download(){
      var a = document.createElement("a");
      var obj = ''
      obj += "&projectId=" + localStorage.getItem("projectId")
      // if(this.needInfo.name != ''){
        obj += "&name=" + this.needInfo.name
      // }
      a.setAttribute(
        "href",
        this.$https +
          "/pc/project/notification/export/notify_info_table?page="+ this.needInfo.page + "&size=" + this.needInfo.size + obj
      );
      a.click();
    },
    btnSeeImg(imgPath,title){
      console.log(imgPath,'imgPath')
      this.title=title
      this.imgPath=imgPath
      this.seeImgDialog=true
    },
    btn_see(info){
      console.log(info,'info')
      let arr=[]
      arr.push({
        imgPath:info.filePath,
        imgName:info.name
      })
      this.imgArr=arr
      //arr.push(info.photo2Path)
      console.log(arr,'arr')
      this.rowsInfo=info
      this.flag=2
    },
    search(type){
      if(type==1){
        this.getSupervising()
      }else if(type==2){
        this.getSupervising1()
      }
    },
    getSupervising(){//项目告知
      var data=this.needInfo
      data["projectId"]=localStorage.getItem('projectId')
      notifiInfo(data).then(res=>{
        res.data.rows.forEach(item => {
          if(item.time!=null){
            item.time=this.getTime(item.time)
          }
        });
        this.infoList=res.data.rows
        if(this.infoList!=null&&this.infoList.length!=0){
          this.needInfo1.photo=this.infoList[0].photo
          this.itemData.place=this.infoList[0].place
          this.itemData.time=this.infoList[0].time
        }
        
        this.totalPage1=res.data.total
      })
    },
    getSupervising1(photo){
      var data=this.needInfo1
      superviseCheck(data).then(res=>{
        console.log(res)
        var arr=[]
        res.data.rows.forEach((item,index)=>{
          item["name"]="告知现场照片"+(index+1)
          item["place"]=this.itemData.place
          item["time"]=this.itemData.time
        })
        this.infoList1=res.data.rows
        this.totalPage2=res.data.total
      })
    },
    getTime(time){
      let times=new Date(time)
      console.log(times.getFullYear(),times.getMonth()+1,times.getDate())
      let year=times.getFullYear()
      let month=(times.getMonth()+1)<10?'0'+(times.getMonth()+1):(times.getMonth()+1)
      let day=times.getDate()<10?'0'+times.getDate():times.getDate()
      let hours=times.getHours()<10?'0'+times.getHours():times.getHours()
      let minutes=times.getMinutes()<10?'0'+times.getMinutes():times.getMinutes()
      let seconds=times.getSeconds()<10?'0'+times.getSeconds():times.getSeconds()
      time=year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds
      return time
    },
    showPage1(val) {
      this.needInfo.page = val;
      this.getSupervising();
    },
    showPage2(val) {
      this.needInfo1.page = val;
      this.getSupervising1();
    },
    handleClick(tab, event) {
      console.log(this.activeName)
      if(this.activeName=="second"){
        this.needInfo1.page=1
        this.getSupervising1()
      }else{
        this.needInfo.page=1
        this.getSupervising()
      }
    },
  }
};
</script>

<style lang="scss">
.form /deep/ .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.seeImg{
  text-align: center;
}
.landInfo{
 border: 1px solid #efefef;
 box-sizing: border-box;
}

.back{
  margin: 20px;
}
.title{
  .title_one{
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #444;
    font-weight: bold;

  }
  .title_little{
    
    font-size: 13px;
    color: #999;
    margin: 40px 20px 20px 30px;
    span{
      margin-right: 30px;
    }
  }
}
.project_title{
  background: #f8f8f8;
  height: 50px;
  background: #f8f8f8;
  padding: 0px 30px;
  line-height: 50px;
  color: #48494d;
  font-size: 14px;
  font-weight: bold;
   border-top: 1px solid #efefef;
      border-bottom: 1px solid #efefef;
}
.project_img{
  padding: 30px;
}
.box {
  padding: 20px 40px;
  background: #fff;
  .first_box {
    padding: 20px;
    .select_bxo {
      display: flex;
      align-items: center;
      div {
        font-size: 14px;
        color: #444;
      }
      .input {
        width: 200px;
        margin: 0px 20px 0px 20px;
      }
      .time{
        margin: 0px 20px 0px 20px;
      }
    }
    .basicInfo_content {
      margin-top: 20px;
      .page_class {
        margin-top: 20px;
        text-align: center;
      }
    }
  }
}
</style>
